<template>
    <div class="user-box">
        <template>
            <el-row class="p-all-20 box-flex ">
                <el-col >
                    <el-button type="success" @click="addUserInfo" size="mini">新建角色</el-button>
                    <el-button type="danger" @click="deleteAllAdmin" size="mini">批量删除</el-button>
                </el-col>
            </el-row>
            <el-table :data="ruleList"  @selection-change="handleSelectionChange" width="100%">
            	<el-table-column type="selection"  :selectable="selectable" align="center">
            	</el-table-column>
            	<el-table-column label="用户角色" align="center">
            		<template slot-scope="scope">{{ scope.row.roleName }}</template>
            	</el-table-column>
            	<el-table-column prop="permission" label="权限" align="center"></el-table-column>
            	<el-table-column prop="createTime" label="创建时间"  align="center"></el-table-column>
            	<el-table-column label="操作" width="250" align="center">
            		<template slot-scope="scope">
            			<el-button @click="toAdminEditer(scope.$index,scope.row)" size='mini' type="primary"  :disabled="!scope.$index">修改</el-button>
            			<el-button @click="toDeleteAdmin(scope.row)" size='mini' type="danger" :disabled="!scope.$index">删除</el-button>
            		</template>
            	</el-table-column>
            </el-table>
            <el-dialog title="新建用户" :visible.sync="centerDialogVisible" width="30%" center>
                <el-row class="p-all-20 ">
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 m-r-10">手机号</span>
                        <el-input type="请输入手机号" />
                    </el-col>
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 m-r-10">昵称</span>
                        <el-input type="请输入昵称" />
                    </el-col>
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 m-r-10">密码</span>
                        <el-input type="请输入密码" />
                    </el-col>
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 ">角色</span>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
			
			<current-page :current-page="rolePage" :page-size="10" :page-total="roleTotal" @handleCurrentChange="handleCurrent"></current-page>	
        </template>
    </div>
</template>

<script>
    import currentPage from '@/components/current-page/current-page.vue'
    import {
        SUCCESS_REQUEST_STATUS
    } from '@/utils/config.js'

    export default {
        props: {
			rolePage: {
				default: 0,
				type: Number,
				required: true,
			},
			roleTotal: {
				default: 0,
				type: Number,
				required: true,
			},
            ruleList: {
                type: Array,
                required: false
            },
            menuList: {
                type: Array,
                required: false
            }

        },
        data() {
            return {
				flag: true,
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                pageSize: 10,
                currentPage: 10,
                pageTotal: 50,
				multipleSelection: [],
                centerDialogVisible: false
            }
        },
        
        methods: {
			selectable(row, index){
				console.log(row)
				if(!index){
					return false
				}else{
					return  true
				}
			},
			handleCurrent(page) {
				console.log(page)
				this.$emit('handleRolePage',page)
			},
			deleteAllAdmin() {
				if(!this.multipleSelection.length) {
					this.$message({
						message: '请选择不是超级管理员的用户进行删除',
						type: 'warning'
					});
					return
				}
				this.$confirm("确定删除此角色?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					let map = this.multipleSelection.map((item) => {return item.id}).join(',')
					this.$ajax({
						api: 'admin/role/batchDelete',
						params: {
							ids: map
						}
					}).then(res => {
						if(res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.$emit('refresh')
						}else{
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					}).catch((err) => {
						console.log(err)
						this.$message({
							message: err.message,
							type: 'warning'
						});
					})
				})
			},
			handleSelectionChange(val){
				this.multipleSelection = val.filter((item) => { return !item.builtIn})
				
			},
			/**
			 * @desc 删除当前选中的用户
			 * @param item {Object} 
			 */
			toDeleteAdmin(item) {
				
				this.$confirm("确定删除此角色?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: '/admin/role/delete',
						params: {
							id: item.id
						}
					}).then(res => {
						console.log(res)
						if(res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.$emit('refresh')
						}else{
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					}).catch((err) => {
						console.log(err)
						this.$message({
							message: err.message,
							type: 'warning'
						});
					})
				})
			},
			toAdminEditer(index, item) {
				this.$emit('toAdminEditer', item.id,item)
			},
			addUserInfo() {
				this.$emit('addUserInfo')
			},
            handleCurrentChange(page) {
                this.currentPage = page
            }
        },
        components: {
            currentPage
        }

    }
</script>

<style>
    .user-box {
        width: 100%;
        max-width: 100%;
    }
</style>
